<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="刘清政">
  <meta name="keyword" content="hexo-theme">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      python/路飞项目/6-课程模块/6-课程详情页之前台 | Justin-刘清政的博客
    
  </title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/css/plugins/gitment.css">

  
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
    
<script src="/js/gitment.js"></script>

  
  

  
<meta name="generator" content="Hexo 4.2.0"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>

  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>Justin-刘清政的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于我</a>
          
        </li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于我</a>
            
          </li>
        
      </ul>
    </div>
  </div>
</header>

    <div id="article-banner">
  <h2>python/路飞项目/6-课程模块/6-课程详情页之前台</h2>



  <p class="post-date">2020-03-06</p>
    <!-- 不蒜子统计 -->
    <span id="busuanzi_container_page_pv" style='display:none' class="">
        <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
    </span>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
<main class="app-body flex-box">
  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content"><h2 id="详情页组件"><a href="#详情页组件" class="headerlink" title="详情页组件"></a>详情页组件</h2><h5 id="依赖：在luffycity目录下的命令"><a href="#依赖：在luffycity目录下的命令" class="headerlink" title="依赖：在luffycity目录下的命令"></a>依赖：在luffycity目录下的命令</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&gt;: cnpm install vue-video-player</span><br></pre></td></tr></table></figure>

<h5 id="配置：main-js"><a href="#配置：main-js" class="headerlink" title="配置：main.js"></a>配置：main.js</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue-video播放器</span></span><br><span class="line"><span class="built_in">require</span>(<span class="string">'video.js/dist/video-js.css'</span>);</span><br><span class="line"><span class="built_in">require</span>(<span class="string">'vue-video-player/src/custom-theme.css'</span>);</span><br><span class="line"><span class="keyword">import</span> VideoPlayer <span class="keyword">from</span> <span class="string">'vue-video-player'</span></span><br><span class="line">Vue.use(VideoPlayer);</span><br></pre></td></tr></table></figure>

<h5 id="资源：图片放置assrts-img文件夹"><a href="#资源：图片放置assrts-img文件夹" class="headerlink" title="资源：图片放置assrts/img文件夹"></a>资源：图片放置assrts/img文件夹</h5><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"""</span></span><br><span class="line"><span class="string">enum.svg</span></span><br><span class="line"><span class="string">chapter-player.svg</span></span><br><span class="line"><span class="string">cart-yellow.svg</span></span><br><span class="line"><span class="string">"""</span></span><br></pre></td></tr></table></figure>

<h5 id="路由：router-js"><a href="#路由：router-js" class="headerlink" title="路由：router.js"></a>路由：router.js</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> FreeCourseDetail <span class="keyword">from</span> <span class="string">'./views/FreeCourseDetail.vue'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Router(&#123;</span><br><span class="line">    routes: [</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">        &#123;</span><br><span class="line">            path: <span class="string">'/free/detail/:pk'</span>,</span><br><span class="line">            name: <span class="string">'free-detail'</span>,</span><br><span class="line">            component: FreeCourseDetail</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br><span class="line">486</span><br><span class="line">487</span><br><span class="line">488</span><br><span class="line">489</span><br><span class="line">490</span><br><span class="line">491</span><br><span class="line">492</span><br><span class="line">493</span><br><span class="line">494</span><br><span class="line">495</span><br><span class="line">496</span><br><span class="line">497</span><br><span class="line">498</span><br><span class="line">499</span><br><span class="line">500</span><br><span class="line">501</span><br><span class="line">502</span><br><span class="line">503</span><br><span class="line">504</span><br><span class="line">505</span><br><span class="line">506</span><br><span class="line">507</span><br><span class="line">508</span><br><span class="line">509</span><br><span class="line">510</span><br><span class="line">511</span><br><span class="line">512</span><br><span class="line">513</span><br><span class="line">514</span><br><span class="line">515</span><br><span class="line">516</span><br><span class="line">517</span><br><span class="line">518</span><br><span class="line">519</span><br><span class="line">520</span><br><span class="line">521</span><br><span class="line">522</span><br><span class="line">523</span><br><span class="line">524</span><br><span class="line">525</span><br><span class="line">526</span><br><span class="line">527</span><br><span class="line">528</span><br><span class="line">529</span><br><span class="line">530</span><br><span class="line">531</span><br><span class="line">532</span><br><span class="line">533</span><br><span class="line">534</span><br><span class="line">535</span><br><span class="line">536</span><br><span class="line">537</span><br><span class="line">538</span><br><span class="line">539</span><br><span class="line">540</span><br><span class="line">541</span><br><span class="line">542</span><br><span class="line">543</span><br><span class="line">544</span><br><span class="line">545</span><br><span class="line">546</span><br><span class="line">547</span><br><span class="line">548</span><br><span class="line">549</span><br><span class="line">550</span><br><span class="line">551</span><br><span class="line">552</span><br><span class="line">553</span><br><span class="line">554</span><br><span class="line">555</span><br><span class="line">556</span><br><span class="line">557</span><br><span class="line">558</span><br><span class="line">559</span><br><span class="line">560</span><br><span class="line">561</span><br><span class="line">562</span><br><span class="line">563</span><br><span class="line">564</span><br><span class="line">565</span><br><span class="line">566</span><br><span class="line">567</span><br><span class="line">568</span><br><span class="line">569</span><br><span class="line">570</span><br><span class="line">571</span><br><span class="line">572</span><br><span class="line">573</span><br><span class="line">574</span><br><span class="line">575</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div class&#x3D;&quot;detail&quot;&gt;</span><br><span class="line">        &lt;Header&#x2F;&gt;</span><br><span class="line">        &lt;div class&#x3D;&quot;main&quot;&gt;</span><br><span class="line">            &lt;div class&#x3D;&quot;course-info&quot;&gt;</span><br><span class="line">                &lt;div class&#x3D;&quot;wrap-left&quot;&gt;</span><br><span class="line">                    &lt;videoPlayer class&#x3D;&quot;video-player vjs-custom-skin&quot;</span><br><span class="line">                                 ref&#x3D;&quot;videoPlayer&quot;</span><br><span class="line">                                 :playsinline&#x3D;&quot;true&quot;</span><br><span class="line">                                 :options&#x3D;&quot;playerOptions&quot;</span><br><span class="line">                                 @play&#x3D;&quot;onPlayerPlay($event)&quot;</span><br><span class="line">                                 @pause&#x3D;&quot;onPlayerPause($event)&quot;&gt;</span><br><span class="line">                    &lt;&#x2F;videoPlayer&gt;</span><br><span class="line">                &lt;&#x2F;div&gt;</span><br><span class="line">                &lt;div class&#x3D;&quot;wrap-right&quot;&gt;</span><br><span class="line">                    &lt;h3 class&#x3D;&quot;course-name&quot;&gt;&#123;&#123;course_info.name&#125;&#125;&lt;&#x2F;h3&gt;</span><br><span class="line">                    &lt;p class&#x3D;&quot;data&quot;&gt;&#123;&#123;course_info.students&#125;&#125;人在学&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;课程总时长：&#123;&#123;course_info.sections&#125;&#125;课时&#x2F;&#123;&#123;course_info.pub_sections&#125;&#125;小时&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;难度：&#123;&#123;course_info.level_name&#125;&#125;&lt;&#x2F;p&gt;</span><br><span class="line">                    &lt;div class&#x3D;&quot;sale-time&quot;&gt;</span><br><span class="line">                        &lt;p class&#x3D;&quot;sale-type&quot;&gt;价格 &lt;span class&#x3D;&quot;original_price&quot;&gt;¥&#123;&#123;course_info.price&#125;&#125;&lt;&#x2F;span&gt;&lt;&#x2F;p&gt;</span><br><span class="line">                        &lt;p class&#x3D;&quot;expire&quot;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">                    &lt;&#x2F;div&gt;</span><br><span class="line">                    &lt;div class&#x3D;&quot;buy&quot;&gt;</span><br><span class="line">                        &lt;div class&#x3D;&quot;buy-btn&quot;&gt;</span><br><span class="line">                            &lt;button class&#x3D;&quot;buy-now&quot;&gt;立即购买&lt;&#x2F;button&gt;</span><br><span class="line">                            &lt;button class&#x3D;&quot;free&quot;&gt;免费试学&lt;&#x2F;button&gt;</span><br><span class="line">                        &lt;&#x2F;div&gt;</span><br><span class="line">                        &lt;!--&lt;div class&#x3D;&quot;add-cart&quot; @click&#x3D;&quot;add_cart(course_info.id)&quot;&gt;--&gt;</span><br><span class="line">														&lt;!--&lt;img src&#x3D;&quot;@&#x2F;assets&#x2F;img&#x2F;cart-yellow.svg&quot; alt&#x3D;&quot;&quot;&gt;加入购物车--&gt;</span><br><span class="line">                        &lt;!--&lt;&#x2F;div&gt;--&gt;</span><br><span class="line">                    &lt;&#x2F;div&gt;</span><br><span class="line">                &lt;&#x2F;div&gt;</span><br><span class="line">            &lt;&#x2F;div&gt;</span><br><span class="line">            &lt;div class&#x3D;&quot;course-tab&quot;&gt;</span><br><span class="line">                &lt;ul class&#x3D;&quot;tab-list&quot;&gt;</span><br><span class="line">                    &lt;li :class&#x3D;&quot;tabIndex&#x3D;&#x3D;1?&#39;active&#39;:&#39;&#39;&quot; @click&#x3D;&quot;tabIndex&#x3D;1&quot;&gt;详情介绍&lt;&#x2F;li&gt;</span><br><span class="line">                    &lt;li :class&#x3D;&quot;tabIndex&#x3D;&#x3D;2?&#39;active&#39;:&#39;&#39;&quot; @click&#x3D;&quot;tabIndex&#x3D;2&quot;&gt;课程章节 &lt;span :class&#x3D;&quot;tabIndex!&#x3D;2?&#39;free&#39;:&#39;&#39;&quot;&gt;(试学)&lt;&#x2F;span&gt;</span><br><span class="line">                    &lt;&#x2F;li&gt;</span><br><span class="line">                    &lt;li :class&#x3D;&quot;tabIndex&#x3D;&#x3D;3?&#39;active&#39;:&#39;&#39;&quot; @click&#x3D;&quot;tabIndex&#x3D;3&quot;&gt;用户评论&lt;&#x2F;li&gt;</span><br><span class="line">                    &lt;li :class&#x3D;&quot;tabIndex&#x3D;&#x3D;4?&#39;active&#39;:&#39;&#39;&quot; @click&#x3D;&quot;tabIndex&#x3D;4&quot;&gt;常见问题&lt;&#x2F;li&gt;</span><br><span class="line">                &lt;&#x2F;ul&gt;</span><br><span class="line">            &lt;&#x2F;div&gt;</span><br><span class="line">            &lt;div class&#x3D;&quot;course-content&quot;&gt;</span><br><span class="line">                &lt;div class&#x3D;&quot;course-tab-list&quot;&gt;</span><br><span class="line">                    &lt;div class&#x3D;&quot;tab-item&quot; v-if&#x3D;&quot;tabIndex&#x3D;&#x3D;1&quot;&gt;</span><br><span class="line">                        &lt;div class&#x3D;&quot;course-brief&quot; v-html&#x3D;&quot;course_info.brief_text&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">                    &lt;&#x2F;div&gt;</span><br><span class="line">                    &lt;div class&#x3D;&quot;tab-item&quot; v-if&#x3D;&quot;tabIndex&#x3D;&#x3D;2&quot;&gt;</span><br><span class="line">                        &lt;div class&#x3D;&quot;tab-item-title&quot;&gt;</span><br><span class="line">                            &lt;p class&#x3D;&quot;chapter&quot;&gt;课程章节&lt;&#x2F;p&gt;</span><br><span class="line">                            &lt;p class&#x3D;&quot;chapter-length&quot;&gt;共&#123;&#123;course_chapters.length&#125;&#125;章 &#123;&#123;course_info.sections&#125;&#125;个课时&lt;&#x2F;p&gt;</span><br><span class="line">                        &lt;&#x2F;div&gt;</span><br><span class="line">                        &lt;div class&#x3D;&quot;chapter-item&quot; v-for&#x3D;&quot;chapter in course_chapters&quot; :key&#x3D;&quot;chapter.name&quot;&gt;</span><br><span class="line">                            &lt;p class&#x3D;&quot;chapter-title&quot;&gt;&lt;img src&#x3D;&quot;@&#x2F;assets&#x2F;img&#x2F;enum.svg&quot; alt&#x3D;&quot;&quot;&gt;第&#123;&#123;chapter.chapter&#125;&#125;章·&#123;&#123;chapter.name&#125;&#125;</span><br><span class="line">                            &lt;&#x2F;p&gt;</span><br><span class="line">                            &lt;ul class&#x3D;&quot;section-list&quot;&gt;</span><br><span class="line">                                &lt;li class&#x3D;&quot;section-item&quot; v-for&#x3D;&quot;section in chapter.coursesections&quot; :key&#x3D;&quot;section.name&quot;&gt;</span><br><span class="line">                                    &lt;p class&#x3D;&quot;name&quot;&gt;&lt;span class&#x3D;&quot;index&quot;&gt;&#123;&#123;chapter.chapter&#125;&#125;-&#123;&#123;section.orders&#125;&#125;&lt;&#x2F;span&gt;</span><br><span class="line">                                        &#123;&#123;section.name&#125;&#125;&lt;span class&#x3D;&quot;free&quot; v-if&#x3D;&quot;section.free_trail&quot;&gt;免费&lt;&#x2F;span&gt;&lt;&#x2F;p&gt;</span><br><span class="line">                                    &lt;p class&#x3D;&quot;time&quot;&gt;&#123;&#123;section.duration&#125;&#125; &lt;img src&#x3D;&quot;@&#x2F;assets&#x2F;img&#x2F;chapter-player.svg&quot;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">                                    &lt;button class&#x3D;&quot;try&quot; v-if&#x3D;&quot;section.free_trail&quot;&gt;立即试学&lt;&#x2F;button&gt;</span><br><span class="line">                                    &lt;button class&#x3D;&quot;try&quot; v-else&gt;立即购买&lt;&#x2F;button&gt;</span><br><span class="line">                                &lt;&#x2F;li&gt;</span><br><span class="line">                            &lt;&#x2F;ul&gt;</span><br><span class="line">                        &lt;&#x2F;div&gt;</span><br><span class="line">                    &lt;&#x2F;div&gt;</span><br><span class="line">                    &lt;div class&#x3D;&quot;tab-item&quot; v-if&#x3D;&quot;tabIndex&#x3D;&#x3D;3&quot;&gt;</span><br><span class="line">                        用户评论</span><br><span class="line">                    &lt;&#x2F;div&gt;</span><br><span class="line">                    &lt;div class&#x3D;&quot;tab-item&quot; v-if&#x3D;&quot;tabIndex&#x3D;&#x3D;4&quot;&gt;</span><br><span class="line">                        常见问题</span><br><span class="line">                    &lt;&#x2F;div&gt;</span><br><span class="line">                &lt;&#x2F;div&gt;</span><br><span class="line">                &lt;div class&#x3D;&quot;course-side&quot;&gt;</span><br><span class="line">                    &lt;div class&#x3D;&quot;teacher-info&quot;&gt;</span><br><span class="line">                        &lt;h4 class&#x3D;&quot;side-title&quot;&gt;&lt;span&gt;授课老师&lt;&#x2F;span&gt;&lt;&#x2F;h4&gt;</span><br><span class="line">                        &lt;div class&#x3D;&quot;teacher-content&quot;&gt;</span><br><span class="line">                            &lt;div class&#x3D;&quot;cont1&quot;&gt;</span><br><span class="line">                                &lt;img :src&#x3D;&quot;course_info.teacher.image&quot;&gt;</span><br><span class="line">                                &lt;div class&#x3D;&quot;name&quot;&gt;</span><br><span class="line">                                    &lt;p class&#x3D;&quot;teacher-name&quot;&gt;&#123;&#123;course_info.teacher.name&#125;&#125;</span><br><span class="line">                                        &#123;&#123;course_info.teacher.title&#125;&#125;&lt;&#x2F;p&gt;</span><br><span class="line">                                    &lt;p class&#x3D;&quot;teacher-title&quot;&gt;&#123;&#123;course_info.teacher.signature&#125;&#125;&lt;&#x2F;p&gt;</span><br><span class="line">                                &lt;&#x2F;div&gt;</span><br><span class="line">                            &lt;&#x2F;div&gt;</span><br><span class="line">                            &lt;p class&#x3D;&quot;narrative&quot;&gt;&#123;&#123;course_info.teacher.brief&#125;&#125;&lt;&#x2F;p&gt;</span><br><span class="line">                        &lt;&#x2F;div&gt;</span><br><span class="line">                    &lt;&#x2F;div&gt;</span><br><span class="line">                &lt;&#x2F;div&gt;</span><br><span class="line">            &lt;&#x2F;div&gt;</span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">        &lt;!--&lt;Footer&#x2F;&gt;--&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    import Header from &quot;@&#x2F;components&#x2F;Header&quot;</span><br><span class="line">    &#x2F;&#x2F; import Footer from &quot;@&#x2F;components&#x2F;Footer&quot;</span><br><span class="line"></span><br><span class="line">    &#x2F;&#x2F; 加载组件</span><br><span class="line">    import &#123;videoPlayer&#125; from &#39;vue-video-player&#39;;</span><br><span class="line"></span><br><span class="line">    export default &#123;</span><br><span class="line">        name: &quot;Detail&quot;,</span><br><span class="line">        data() &#123;</span><br><span class="line">            return &#123;</span><br><span class="line">                tabIndex: 2,   &#x2F;&#x2F; 当前选项卡显示的下标</span><br><span class="line">                course_id: 0, &#x2F;&#x2F; 当前课程信息的ID</span><br><span class="line">                course_info: &#123;</span><br><span class="line">                    teacher: &#123;&#125;,</span><br><span class="line">                &#125;, &#x2F;&#x2F; 课程信息</span><br><span class="line">                course_chapters: [], &#x2F;&#x2F; 课程的章节课时列表</span><br><span class="line">                playerOptions: &#123;</span><br><span class="line">                    aspectRatio: &#39;16:9&#39;, &#x2F;&#x2F; 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如&quot;16:9&quot;或&quot;4:3&quot;）</span><br><span class="line">                    sources: [&#123; &#x2F;&#x2F; 播放资源和资源格式</span><br><span class="line">                        type: &quot;video&#x2F;mp4&quot;,</span><br><span class="line">                        src: &quot;http:&#x2F;&#x2F;img.ksbbs.com&#x2F;asset&#x2F;Mon_1703&#x2F;05cacb4e02f9d9e.mp4&quot; &#x2F;&#x2F;你的视频地址（必填）</span><br><span class="line">                    &#125;],</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        created() &#123;</span><br><span class="line">            this.get_course_id();</span><br><span class="line">            this.get_course_data();</span><br><span class="line">            this.get_chapter();</span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;</span><br><span class="line">            onPlayerPlay() &#123;</span><br><span class="line">                &#x2F;&#x2F; 当视频播放时，执行的方法</span><br><span class="line">                console.log(&#39;视频开始播放&#39;)</span><br><span class="line">            &#125;,</span><br><span class="line">            onPlayerPause() &#123;</span><br><span class="line">                &#x2F;&#x2F; 当视频暂停播放时，执行的方法</span><br><span class="line">                console.log(&#39;视频暂停，可以打开广告了&#39;)</span><br><span class="line">            &#125;,</span><br><span class="line">            get_course_id() &#123;</span><br><span class="line">                &#x2F;&#x2F; 获取地址栏上面的课程ID</span><br><span class="line">                this.course_id &#x3D; this.$route.params.pk || this.$route.query.pk;</span><br><span class="line">                if (this.course_id &lt; 1) &#123;</span><br><span class="line">                    let _this &#x3D; this;</span><br><span class="line">                    _this.$alert(&quot;对不起，当前视频不存在！&quot;, &quot;警告&quot;, &#123;</span><br><span class="line">                        callback() &#123;</span><br><span class="line">                            _this.$router.go(-1);</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;);</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            get_course_data() &#123;</span><br><span class="line">                &#x2F;&#x2F; ajax请求课程信息</span><br><span class="line">                this.$axios.get(&#96;$&#123;this.$settings.base_url&#125;&#x2F;course&#x2F;free&#x2F;$&#123;this.course_id&#125;&#x2F;&#96;).then(response &#x3D;&gt; &#123;</span><br><span class="line">                    &#x2F;&#x2F; window.console.log(response.data);</span><br><span class="line">                    this.course_info &#x3D; response.data;</span><br><span class="line">                    console.log(this.course_info)</span><br><span class="line">                &#125;).catch(() &#x3D;&gt; &#123;</span><br><span class="line">                    this.$message(&#123;</span><br><span class="line">                        message: &quot;对不起，访问页面出错！请联系客服工作人员！&quot;</span><br><span class="line">                    &#125;);</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;,</span><br><span class="line"></span><br><span class="line">            get_chapter() &#123;</span><br><span class="line">                &#x2F;&#x2F; 获取当前课程对应的章节课时信息</span><br><span class="line">                &#x2F;&#x2F; http:&#x2F;&#x2F;127.0.0.1:8000&#x2F;course&#x2F;chapters&#x2F;?course&#x3D;(pk)</span><br><span class="line">                this.$axios.get(&#96;$&#123;this.$settings.base_url&#125;&#x2F;course&#x2F;chapters&#x2F;&#96;, &#123;</span><br><span class="line">                    params: &#123;</span><br><span class="line">                        &quot;course&quot;: this.course_id,</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;).then(response &#x3D;&gt; &#123;</span><br><span class="line">                    this.course_chapters &#x3D; response.data;</span><br><span class="line">                &#125;).catch(error &#x3D;&gt; &#123;</span><br><span class="line">                    window.console.log(error.response);</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        components: &#123;</span><br><span class="line">            Header,</span><br><span class="line">            &#x2F;&#x2F; Footer,</span><br><span class="line">            videoPlayer, &#x2F;&#x2F; 注册组件</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">    .main &#123;</span><br><span class="line">        background: #fff;</span><br><span class="line">        padding-top: 30px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .course-info &#123;</span><br><span class="line">        width: 1200px;</span><br><span class="line">        margin: 0 auto;</span><br><span class="line">        overflow: hidden;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .wrap-left &#123;</span><br><span class="line">        float: left;</span><br><span class="line">        width: 690px;</span><br><span class="line">        height: 388px;</span><br><span class="line">        background-color: #000;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .wrap-right &#123;</span><br><span class="line">        float: left;</span><br><span class="line">        position: relative;</span><br><span class="line">        height: 388px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .course-name &#123;</span><br><span class="line">        font-size: 20px;</span><br><span class="line">        color: #333;</span><br><span class="line">        padding: 10px 23px;</span><br><span class="line">        letter-spacing: .45px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .data &#123;</span><br><span class="line">        padding-left: 23px;</span><br><span class="line">        padding-right: 23px;</span><br><span class="line">        padding-bottom: 16px;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #9b9b9b;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .sale-time &#123;</span><br><span class="line">        width: 464px;</span><br><span class="line">        background: #fa6240;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #4a4a4a;</span><br><span class="line">        padding: 10px 23px;</span><br><span class="line">        overflow: hidden;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .sale-type &#123;</span><br><span class="line">        font-size: 16px;</span><br><span class="line">        color: #fff;</span><br><span class="line">        letter-spacing: .36px;</span><br><span class="line">        float: left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .sale-time .expire &#123;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #fff;</span><br><span class="line">        float: right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .sale-time .expire .second &#123;</span><br><span class="line">        width: 24px;</span><br><span class="line">        display: inline-block;</span><br><span class="line">        background: #fafafa;</span><br><span class="line">        color: #5e5e5e;</span><br><span class="line">        padding: 6px 0;</span><br><span class="line">        text-align: center;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .course-price &#123;</span><br><span class="line">        background: #fff;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #4a4a4a;</span><br><span class="line">        padding: 5px 23px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .discount &#123;</span><br><span class="line">        font-size: 26px;</span><br><span class="line">        color: #fa6240;</span><br><span class="line">        margin-left: 10px;</span><br><span class="line">        display: inline-block;</span><br><span class="line">        margin-bottom: -5px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .original &#123;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #9b9b9b;</span><br><span class="line">        margin-left: 10px;</span><br><span class="line">        text-decoration: line-through;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .buy &#123;</span><br><span class="line">        width: 464px;</span><br><span class="line">        padding: 0px 23px;</span><br><span class="line">        position: absolute;</span><br><span class="line">        left: 0;</span><br><span class="line">        bottom: 20px;</span><br><span class="line">        overflow: hidden;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .buy .buy-btn &#123;</span><br><span class="line">        float: left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .buy .buy-now &#123;</span><br><span class="line">        width: 125px;</span><br><span class="line">        height: 40px;</span><br><span class="line">        border: 0;</span><br><span class="line">        background: #ffc210;</span><br><span class="line">        border-radius: 4px;</span><br><span class="line">        color: #fff;</span><br><span class="line">        cursor: pointer;</span><br><span class="line">        margin-right: 15px;</span><br><span class="line">        outline: none;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .buy .free &#123;</span><br><span class="line">        width: 125px;</span><br><span class="line">        height: 40px;</span><br><span class="line">        border-radius: 4px;</span><br><span class="line">        cursor: pointer;</span><br><span class="line">        margin-right: 15px;</span><br><span class="line">        background: #fff;</span><br><span class="line">        color: #ffc210;</span><br><span class="line">        border: 1px solid #ffc210;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .add-cart &#123;</span><br><span class="line">        float: right;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #ffc210;</span><br><span class="line">        text-align: center;</span><br><span class="line">        cursor: pointer;</span><br><span class="line">        margin-top: 10px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .add-cart img &#123;</span><br><span class="line">        width: 20px;</span><br><span class="line">        height: 18px;</span><br><span class="line">        margin-right: 7px;</span><br><span class="line">        vertical-align: middle;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .course-tab &#123;</span><br><span class="line">        width: 100%;</span><br><span class="line">        background: #fff;</span><br><span class="line">        margin-bottom: 30px;</span><br><span class="line">        box-shadow: 0 2px 4px 0 #f0f0f0;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .course-tab .tab-list &#123;</span><br><span class="line">        width: 1200px;</span><br><span class="line">        margin: auto;</span><br><span class="line">        color: #4a4a4a;</span><br><span class="line">        overflow: hidden;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .tab-list li &#123;</span><br><span class="line">        float: left;</span><br><span class="line">        margin-right: 15px;</span><br><span class="line">        padding: 26px 20px 16px;</span><br><span class="line">        font-size: 17px;</span><br><span class="line">        cursor: pointer;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .tab-list .active &#123;</span><br><span class="line">        color: #ffc210;</span><br><span class="line">        border-bottom: 2px solid #ffc210;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .tab-list .free &#123;</span><br><span class="line">        color: #fb7c55;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .course-content &#123;</span><br><span class="line">        width: 1200px;</span><br><span class="line">        margin: 0 auto;</span><br><span class="line">        background: #FAFAFA;</span><br><span class="line">        overflow: hidden;</span><br><span class="line">        padding-bottom: 40px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .course-tab-list &#123;</span><br><span class="line">        width: 880px;</span><br><span class="line">        height: auto;</span><br><span class="line">        padding: 20px;</span><br><span class="line">        background: #fff;</span><br><span class="line">        float: left;</span><br><span class="line">        box-sizing: border-box;</span><br><span class="line">        overflow: hidden;</span><br><span class="line">        position: relative;</span><br><span class="line">        box-shadow: 0 2px 4px 0 #f0f0f0;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .tab-item &#123;</span><br><span class="line">        width: 880px;</span><br><span class="line">        background: #fff;</span><br><span class="line">        padding-bottom: 20px;</span><br><span class="line">        box-shadow: 0 2px 4px 0 #f0f0f0;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .tab-item-title &#123;</span><br><span class="line">        justify-content: space-between;</span><br><span class="line">        padding: 25px 20px 11px;</span><br><span class="line">        border-radius: 4px;</span><br><span class="line">        margin-bottom: 20px;</span><br><span class="line">        border-bottom: 1px solid #333;</span><br><span class="line">        border-bottom-color: rgba(51, 51, 51, .05);</span><br><span class="line">        overflow: hidden;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .chapter &#123;</span><br><span class="line">        font-size: 17px;</span><br><span class="line">        color: #4a4a4a;</span><br><span class="line">        float: left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .chapter-length &#123;</span><br><span class="line">        float: right;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #9b9b9b;</span><br><span class="line">        letter-spacing: .19px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .chapter-title &#123;</span><br><span class="line">        font-size: 16px;</span><br><span class="line">        color: #4a4a4a;</span><br><span class="line">        letter-spacing: .26px;</span><br><span class="line">        padding: 12px;</span><br><span class="line">        background: #eee;</span><br><span class="line">        border-radius: 2px;</span><br><span class="line">        display: -ms-flexbox;</span><br><span class="line">        display: flex;</span><br><span class="line">        -ms-flex-align: center;</span><br><span class="line">        align-items: center;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .chapter-title img &#123;</span><br><span class="line">        width: 18px;</span><br><span class="line">        height: 18px;</span><br><span class="line">        margin-right: 7px;</span><br><span class="line">        vertical-align: middle;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-list &#123;</span><br><span class="line">        padding: 0 20px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-list .section-item &#123;</span><br><span class="line">        padding: 15px 20px 15px 36px;</span><br><span class="line">        cursor: pointer;</span><br><span class="line">        justify-content: space-between;</span><br><span class="line">        position: relative;</span><br><span class="line">        overflow: hidden;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-item .name &#123;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #666;</span><br><span class="line">        float: left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-item .index &#123;</span><br><span class="line">        margin-right: 5px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-item .free &#123;</span><br><span class="line">        font-size: 12px;</span><br><span class="line">        color: #fff;</span><br><span class="line">        letter-spacing: .19px;</span><br><span class="line">        background: #ffc210;</span><br><span class="line">        border-radius: 100px;</span><br><span class="line">        padding: 1px 9px;</span><br><span class="line">        margin-left: 10px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-item .time &#123;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #666;</span><br><span class="line">        letter-spacing: .23px;</span><br><span class="line">        opacity: 1;</span><br><span class="line">        transition: all .15s ease-in-out;</span><br><span class="line">        float: right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-item .time img &#123;</span><br><span class="line">        width: 18px;</span><br><span class="line">        height: 18px;</span><br><span class="line">        margin-left: 15px;</span><br><span class="line">        vertical-align: text-bottom;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-item .try &#123;</span><br><span class="line">        width: 86px;</span><br><span class="line">        height: 28px;</span><br><span class="line">        background: #ffc210;</span><br><span class="line">        border-radius: 4px;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #fff;</span><br><span class="line">        position: absolute;</span><br><span class="line">        right: 20px;</span><br><span class="line">        top: 10px;</span><br><span class="line">        opacity: 0;</span><br><span class="line">        transition: all .2s ease-in-out;</span><br><span class="line">        cursor: pointer;</span><br><span class="line">        outline: none;</span><br><span class="line">        border: none;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-item:hover &#123;</span><br><span class="line">        background: #fcf7ef;</span><br><span class="line">        box-shadow: 0 0 0 0 #f3f3f3;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-item:hover .name &#123;</span><br><span class="line">        color: #333;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .section-item:hover .try &#123;</span><br><span class="line">        opacity: 1;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .course-side &#123;</span><br><span class="line">        width: 300px;</span><br><span class="line">        height: auto;</span><br><span class="line">        margin-left: 20px;</span><br><span class="line">        float: right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .teacher-info &#123;</span><br><span class="line">        background: #fff;</span><br><span class="line">        margin-bottom: 20px;</span><br><span class="line">        box-shadow: 0 2px 4px 0 #f0f0f0;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .side-title &#123;</span><br><span class="line">        font-weight: normal;</span><br><span class="line">        font-size: 17px;</span><br><span class="line">        color: #4a4a4a;</span><br><span class="line">        padding: 18px 14px;</span><br><span class="line">        border-bottom: 1px solid #333;</span><br><span class="line">        border-bottom-color: rgba(51, 51, 51, .05);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .side-title span &#123;</span><br><span class="line">        display: inline-block;</span><br><span class="line">        border-left: 2px solid #ffc210;</span><br><span class="line">        padding-left: 12px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .teacher-content &#123;</span><br><span class="line">        padding: 30px 20px;</span><br><span class="line">        box-sizing: border-box;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .teacher-content .cont1 &#123;</span><br><span class="line">        margin-bottom: 12px;</span><br><span class="line">        overflow: hidden;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .teacher-content .cont1 img &#123;</span><br><span class="line">        width: 54px;</span><br><span class="line">        height: 54px;</span><br><span class="line">        margin-right: 12px;</span><br><span class="line">        float: left;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .teacher-content .cont1 .name &#123;</span><br><span class="line">        float: right;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .teacher-content .cont1 .teacher-name &#123;</span><br><span class="line">        width: 188px;</span><br><span class="line">        font-size: 16px;</span><br><span class="line">        color: #4a4a4a;</span><br><span class="line">        padding-bottom: 4px;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .teacher-content .cont1 .teacher-title &#123;</span><br><span class="line">        width: 188px;</span><br><span class="line">        font-size: 13px;</span><br><span class="line">        color: #9b9b9b;</span><br><span class="line">        white-space: nowrap;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .teacher-content .narrative &#123;</span><br><span class="line">        font-size: 14px;</span><br><span class="line">        color: #666;</span><br><span class="line">        line-height: 24px;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;&#x2F;style&gt;</span><br></pre></td></tr></table></figure>

</section>
    <!-- Tags START -->
    
    <!-- Tags END -->
    <!-- NAV START -->
    
  <div class="nav-container">
    <!-- reverse left and right to put prev and next in a more logic postition -->
    
      <a class="nav-left" href="/python/%E8%B7%AF%E9%A3%9E%E9%A1%B9%E7%9B%AE/5-celery/1-celery/">
        <span class="nav-arrow">← </span>
        
          python/路飞项目/5-celery/1-celery
        
      </a>
    
    
      <a class="nav-right" href="/python/%E8%B7%AF%E9%A3%9E%E9%A1%B9%E7%9B%AE/7-%E6%90%9C%E7%B4%A2%E5%8A%9F%E8%83%BD/1-%E6%90%9C%E7%B4%A2%E5%AF%BC%E8%88%AA%E6%A0%8F/">
        
          python/路飞项目/7-搜索功能/1-搜索导航栏
        
        <span class="nav-arrow"> →</span>
      </a>
    
  </div>

    <!-- NAV END -->
    <!-- 打赏 START -->
    
      <div class="money-like">
        <div class="reward-btn">
          赏
          <span class="money-code">
            <span class="alipay-code">
              <div class="code-image"></div>
              <b>使用支付宝打赏</b>
            </span>
            <span class="wechat-code">
              <div class="code-image"></div>
              <b>使用微信打赏</b>
            </span>
          </span>
        </div>
        <p class="notice">点击上方按钮,请我喝杯咖啡！</p>
      </div>
    
    <!-- 打赏 END -->
    <!-- 二维码 START -->
    
      <div class="qrcode">
        <canvas id="share-qrcode"></canvas>
        <p class="notice">扫描二维码，分享此文章</p>
      </div>
    
    <!-- 二维码 END -->
    
      <!-- Gitment START -->
      <div id="comments"></div>
      <!-- Gitment END -->
    
  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  
    <aside class="catalog-container">
  <div class="toc-main">
  <!-- 不蒜子统计 -->
    <strong class="toc-title">目录</strong>
    
      <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#详情页组件"><span class="toc-nav-text">详情页组件</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-5"><a class="toc-nav-link" href="#依赖：在luffycity目录下的命令"><span class="toc-nav-text">依赖：在luffycity目录下的命令</span></a></li><li class="toc-nav-item toc-nav-level-5"><a class="toc-nav-link" href="#配置：main-js"><span class="toc-nav-text">配置：main.js</span></a></li><li class="toc-nav-item toc-nav-level-5"><a class="toc-nav-link" href="#资源：图片放置assrts-img文件夹"><span class="toc-nav-text">资源：图片放置assrts&#x2F;img文件夹</span></a></li><li class="toc-nav-item toc-nav-level-5"><a class="toc-nav-link" href="#路由：router-js"><span class="toc-nav-text">路由：router.js</span></a></li><li class="toc-nav-item toc-nav-level-5"><a class="toc-nav-link" href="#组件"><span class="toc-nav-text">组件</span></a></li></ol></li></ol></li></ol></li></ol>
    
  </div>
</aside>
  
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = 'http://www.liuqingzheng.top/python/路飞项目/6-课程模块/6-课程详情页之前台/';
    var banner = ''
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

    // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', 'http://file.muyutech.com/error-img.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== 'http://file.muyutech.com/error-img.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })
  })();
</script>


  <script>
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });
  </script>



  <script>
    var gitmentConfig = "liuqingzheng";
    if (gitmentConfig !== 'undefined') {
      var gitment = new Gitment({
        id: "python/路飞项目/6-课程模块/6-课程详情页之前台",
        owner: "liuqingzheng",
        repo: "FuckBlog",
        oauth: {
          client_id: "32a4076431cf39d0ecea",
          client_secret: "94484bd79b3346a949acb2fda3c8a76ce16990c6"
        },
        theme: {
          render(state, instance) {
            const container = document.createElement('div')
            container.lang = "en-US"
            container.className = 'gitment-container gitment-root-container'
            container.appendChild(instance.renderHeader(state, instance))
            container.appendChild(instance.renderEditor(state, instance))
            container.appendChild(instance.renderComments(state, instance))
            container.appendChild(instance.renderFooter(state, instance))
            return container;
          }
        }
      })
      gitment.render(document.getElementById('comments'))
    }
  </script>




    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
<!-- 不蒜子统计 -->
<span id="busuanzi_container_site_pv">
     本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv" style='display:none'>
     本站访客数<span id="busuanzi_value_site_uv"></span>人
</span>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



  <p class="copyright">
    &copy; 2021 | Proudly powered by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank">小猿取经</a>
    <br>
    Theme by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank" rel="noopener">小猿取经</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>





<!-- Baidu Tongji -->

<script>
    var _baId = 'c5fd96eee1193585be191f318c3fa725';
    // Originial
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?" + _baId;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
</script>


<script src="/js/script.js"></script>


<script src="/js/search.js"></script>


<script src="/js/load.js"></script>



  <span class="local-search local-search-google local-search-plugin" style="right: 50px;top: 70px;;position:absolute;z-index:2;">
      <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" style="">
      <div id="local-search-result" class="local-search-result-cls"></div>
  </span>


  </body>
</html>